<template>
  <div class="oe-approval-list">
    <top-tip :title="titleList"></top-tip>
    <div class="oe-approval-container">
      <div class="oe-approval-input">
        姓名/学号：
        <a-input v-model="student" placeholder="请输入学生姓名或学号" /> 是否为补考：
        <a-select defaultValue="全部" style="width: 200px" @change="handleChange">
          <a-select-option value="全部">全部</a-select-option>
          <a-select-option value="是">是</a-select-option>
          <a-select-option value="否">否</a-select-option>
        </a-select>
        <a-button type="primary">查询</a-button>
      </div>
      <div class="oe-approval-table">
        <a-table :columns="columns" :dataSource="dataList" :rowSelection="rowSelection" :pagination="pagination" />
      </div>
    </div>
  </div>
</template>

<script>
import topTip from '@/components/top-tip/index.vue';
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  }
};
export default {
  name: 'approvalList',
  components: {
    topTip
  },
  data() {
    return {
      titleList: [{ text: '总已批阅' }],
      // 搜索的学生
      student: '',
      // 分页配置
      pagination: {
        // pageSizeOptions: ['10', '20', '50', '100', '1000'],
        showQuickJumper: true,
        // showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
          //   this.onClick(current, pageSize)
        },
        onChange: (current, pageSize) => {
          console.log('current', current);
          console.log('curpageSizerent', pageSize);
          //   this.onClick(current, pageSize)
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
        },
        buildOptionText(props) {
          console.log(props);
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10
      },
      // 表标题
      columns: [
        {
          title: '序号',
          dataIndex: 'number',
          width: '9%',
          key: 'number'
        },
        {
          title: '姓名',
          dataIndex: 'name',
          width: '10%',
          key: 'name',
          sorter: true
        },
        {
          title: '学号',
          dataIndex: 'studenNumber',
          width: '10%',
          key: 'studenNumber',
          sorter: true
        },
        {
          title: '院校',
          dataIndex: 'school',
          width: '11%',
          key: 'school',
          sorter: true
        },
        {
          title: '专业',
          dataIndex: 'major',
          width: '11%',
          key: 'major',
          sorter: true
        },
        {
          title: '年级',
          dataIndex: 'grade',
          width: '10%',
          key: 'grade',
          sorter: true
        },
        {
          title: '班级',
          dataIndex: 'class',
          width: '10%',
          key: 'class',
          sorter: true
        },
        {
          title: '是否补考',
          dataIndex: 'secondExam',
          width: '9%',
          key: 'secondExam',
          sorter: true
        },
        {
          title: '成绩',
          dataIndex: 'score',
          width: '9%',
          key: 'score',
          sorsortertOrder: true
        },
        {
          title: '提交时间',
          dataIndex: 'time',
          width: '11%',
          key: 'time',
          sorter: true
        }
      ],
      // 数据列表
      dataList: [
        {
          number: '111',
          name: '黄鑫',
          studenNumber: '213123123123',
          school: '计算机软件学院',
          major: '黄鑫',
          grade: '黄鑫',
          score: '黄鑫',
          time: '黄鑫',
          secondExam: '是',
          class: '黄鑫'
        },
        {
          number: '111',
          name: '黄鑫',
          studenNumber: '213123123123',
          school: '计算机软件学院',
          major: '黄鑫',
          grade: '黄鑫',
          score: '黄鑫',
          time: '黄鑫',
          secondExam: '是',
          class: '黄鑫'
        },
        {
          number: '111',
          name: '黄鑫',
          studenNumber: '213123123123',
          school: '计算机软件学院',
          major: '黄鑫',
          grade: '黄鑫',
          score: '黄鑫',
          time: '黄鑫',
          secondExam: '是',
          class: '黄鑫'
        },
        {
          number: '111',
          name: '黄鑫',
          studenNumber: '213123123123',
          school: '计算机软件学院',
          major: '黄鑫',
          grade: '黄鑫',
          score: '黄鑫',
          time: '黄鑫',
          secondExam: '是',
          class: '黄鑫'
        },
        {
          number: '111',
          name: '黄鑫',
          studenNumber: '213123123123',
          school: '计算机软件学院',
          major: '黄鑫',
          grade: '黄鑫',
          score: '黄鑫',
          time: '黄鑫',
          secondExam: '是',
          class: '黄鑫'
        },
        {
          number: '111',
          name: '黄鑫',
          studenNumber: '213123123123',
          school: '计算机软件学院',
          major: '黄鑫',
          grade: '黄鑫',
          score: '黄鑫',
          time: '黄鑫',
          secondExam: '是',
          class: '黄鑫'
        },
        {
          number: '111',
          name: '黄鑫',
          studenNumber: '213123123123',
          school: '计算机软件学院',
          major: '黄鑫',
          grade: '黄鑫',
          score: '黄鑫',
          time: '黄鑫',
          secondExam: '是',
          class: '黄鑫'
        },
        {
          number: '111',
          name: '黄鑫',
          studenNumber: '213123123123',
          school: '计算机软件学院',
          major: '黄鑫',
          grade: '黄鑫',
          score: '黄鑫',
          time: '黄鑫',
          secondExam: '是',
          class: '黄鑫'
        },
        {
          number: '111',
          name: '黄鑫',
          studenNumber: '213123123123',
          school: '计算机软件学院',
          major: '黄鑫',
          grade: '黄鑫',
          score: '黄鑫',
          time: '黄鑫',
          secondExam: '是',
          class: '黄鑫'
        },
        {
          number: '111',
          name: '黄鑫',
          studenNumber: '213123123123',
          school: '计算机软件学院',
          major: '黄鑫',
          grade: '黄鑫',
          score: '黄鑫',
          time: '黄鑫',
          secondExam: '是',
          class: '黄鑫'
        },
        {
          number: '111',
          name: '黄鑫',
          studenNumber: '213123123123',
          school: '计算机软件学院',
          major: '黄鑫',
          grade: '黄鑫',
          score: '黄鑫',
          time: '黄鑫',
          secondExam: '是',
          class: '黄鑫'
        },
        {
          number: '111',
          name: '黄鑫',
          studenNumber: '213123123123',
          school: '计算机软件学院',
          major: '黄鑫',
          grade: '黄鑫',
          score: '黄鑫',
          time: '黄鑫',
          secondExam: '是',
          class: '黄鑫'
        },
        {
          number: '111',
          name: '黄鑫',
          studenNumber: '213123123123',
          school: '计算机软件学院',
          major: '黄鑫',
          grade: '黄鑫',
          score: '黄鑫',
          time: '黄鑫',
          secondExam: '是',
          class: '黄鑫'
        }
      ]
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm.$route.name == 'totalApproval') {
        vm.titleList = [{ text: '总已批阅' }];
      } else {
        vm.titleList = [{ text: '我已批阅' }];
      }
    });
  },
  methods: {
    handleChange(val) {}
  }
};
</script>
